<template>
  <el-card class="task-manage-card">
    <!-- 骨架屏 -->
    <div v-if="!loadingTable" class="skeleton-container">
      <div class="card-header skeleton-header">
        <div class="left-section">
          <div class="skeleton-title"></div>
        </div>
        <div class="right-section">
          <div class="skeleton-filters">
            <div class="skeleton-select"></div>
            <div class="skeleton-select"></div>
            <div class="skeleton-button"></div>
            <div class="skeleton-button"></div>
          </div>
        </div>
      </div>
      
      <div class="skeleton-table">
        <div class="skeleton-table-header">
          <div class="skeleton-th" style="width: 80px"></div>
          <div class="skeleton-th"></div>
          <div class="skeleton-th"></div>
          <div class="skeleton-th"></div>
          <div class="skeleton-th"></div>
          <div class="skeleton-th"></div>
          <div class="skeleton-th"></div>
          <div class="skeleton-th" style="width: 220px"></div>
        </div>
        
        <div v-for="i in 5" :key="i" class="skeleton-row">
          <div class="skeleton-td" style="width: 80px"></div>
          <div class="skeleton-td"></div>
          <div class="skeleton-td"></div>
          <div class="skeleton-td"></div>
          <div class="skeleton-td"></div>
          <div class="skeleton-td"></div>
          <div class="skeleton-td"></div>
          <div class="skeleton-td" style="width: 220px">
            <div class="skeleton-button-small"></div>
          </div>
        </div>
        
        <div class="skeleton-pagination">
          <div class="skeleton-pagination-item"></div>
          <div class="skeleton-pagination-item"></div>
          <div class="skeleton-pagination-item"></div>
        </div>
      </div>
    </div>

      <div class="card-header" v-if="loadingTable">
      <div class="left-section">
        <h2>评阅任务管理</h2>
      </div>
      <div class="right-section">
        <div class="filter-container">
          <el-select v-model="timeOrder" placeholder="时间排序" class="filter-item">
            <el-option label="时间降序" value="desc" />
            <el-option label="时间升序" value="asc" />
          </el-select>
          <el-select v-model="status" placeholder="批阅状态" class="filter-item">
            <el-option label="所有状态" value="所有状态" />
            <el-option label="待分配" value="1" />
            <el-option label="批阅中" value="2" />
            <el-option label="已批阅" value="3" />
          </el-select>
          <rip-button style="width: 70px;height: 33px;" @click="handleReset">重置</rip-button>
          <el-button type="primary" @click="handleQuery" class="filter-button">查询</el-button>
        </div>
      </div>
    </div>
    
  <page-list v-if="loadingTable"
  :tableData="taskList" 
  :total="total" 
  @getPage="getPage"
  >
  <el-table-column label="序号" type="index" width="80" />
  <el-table-column label="考试名称" prop="examinationName" />
  <el-table-column label="分配策略" prop="assignmentStrategy" >
    <template #default="scope">
      {{ scope.row.assignmentStrategy === 1 ? '整张试卷' : '单道大题' }}
    </template>
  </el-table-column>
  <el-table-column label="分配时间" prop="startTime" />
  <el-table-column label="结束时间" prop="endTime" />
  <el-table-column label="任务状态" prop="status" >
    <template #default="scope">
      <el-tag v-if="scope.row.status === 1" type="danger">待批阅</el-tag>
      <el-tag v-if="scope.row.status === 2" type="warning">批阅中</el-tag>
      <el-tag v-if="scope.row.status === 3" type="success">已批阅</el-tag>
    </template>
  </el-table-column>
  <el-table-column label="完成情况" prop="reviewCount" >
    <template #default="scope">
      {{ scope.row.doneCount }} / {{ scope.row.detailCount }} {{ scope.row.assignmentStrategy === 1 ? '张' : '道' }}
    </template>
  </el-table-column>
  <el-table-column label="操作" width="220">
    <template #default="scope">
      <el-button  type="primary" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
    </template>
  </el-table-column>
    

  </page-list>

  </el-card>

  <!-- 整张试卷批阅任务详情对话框 -->
  <el-dialog 
    v-model="oneVisible" 
    title="策略：整张试卷批阅" 
    width="850px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    class="paper-review-dialog"
  >
    <div class="dialog-header">
      <div class="progress-info">
        <el-progress 
          type="dashboard" 
          :percentage="Math.floor((doneTotal / wholePaperTotal) * 100)" 
          :stroke-width="8"
          :width="80"
          :format="() => `${doneTotal}/${wholePaperTotal} 张`"
          :color="progressColor"
        ></el-progress>
        <span class="progress-text">批阅完成情况</span>
      </div>
      
      <div class="filter-container">
        <el-select v-model="oneStatus" placeholder="批阅状态" class="filter-item">
          <el-option label="所有状态" value="所有状态" />
          <el-option label="未完成" value="0" />
          <el-option label="已批阅" value="1" />
        </el-select>
        <div class="button-group">
          <rip-button @click="oneHandleReset" plain class="action-btn reset-btn">
            <el-icon><RefreshLeft /></el-icon> &nbsp;重置
          </rip-button>
          <rip-button type="primary" @click="oneHandleQuery" class="action-btn query-btn">
            <el-icon><Search /></el-icon> &nbsp;查询
          </rip-button>
        </div>
      </div>
    </div>
    
    <div class="dialog-content">
      <page-list :tableData="taskDetailList" :total="wholePaperTotal" @getPage="getPageByOne" >  
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="学生姓名" prop="studentName" align="center" min-width="100" />
        <el-table-column label="学号" prop="account" align="center" min-width="120" />
        <el-table-column label="班级名称" prop="classesName" align="center" min-width="140" />
        <el-table-column label="批改进度" align="center" min-width="100">
          <template #default="scope">
            <div class="review-progress">
              <span>{{ scope.row.doneCount }} / {{ scope.row.detailCount }} 道</span>
              <el-progress 
                :percentage="Math.floor((scope.row.doneCount / scope.row.detailCount) * 100)"
                :status="getProgressStatus(scope.row)"
                :stroke-width="6"
                style="position: relative; left: 25px; "
              ></el-progress>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-tag 
              v-if="scope.row.status === 0 && scope.row.doneCount === 0" 
              type="danger" 
              effect="dark"
              class="status-tag"
            >
              未批阅
            </el-tag>
            <el-tag 
              v-if="scope.row.status === 0 && scope.row.doneCount !== 0" 
              type="warning" 
              effect="dark"
              class="status-tag"
            >
              批阅中
            </el-tag>
            <el-tag 
              v-if="scope.row.status === 1" 
              type="success" 
              effect="dark"
              class="status-tag"
            >
              已批阅
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button 
              v-if="scope.row.status === 0" 
              type="primary" 
              size="small" 
              @click="goToSinglePaperReview(scope.row.id,reviewAssignmentId)"
              plain
              class="table-action-btn edit-btn"
            >
              <el-icon><Edit /></el-icon>
              进入批阅
            </el-button>
            <el-button 
              v-if="scope.row.status === 1" 
              type="success" 
              size="small" 
              @click="goToSinglePaperReview(scope.row.id,reviewAssignmentId)"
              plain
              class="table-action-btn view-btn"
            >
              <el-icon><View /></el-icon>
              查看批改
            </el-button>
          </template>
        </el-table-column>
      </page-list>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="oneVisible = false" class="footer-btn close-btn">关闭</el-button>
        <el-button 
          type="primary" 
          @click="goToBatchReview(reviewAssignmentId)" 
          :disabled="wholePaperTotal === 0"
          class="footer-btn start-btn"
        >
         {{ isExpired  ? '批量查看详情' : '开始批量批阅' }}
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 单道大题批阅任务详情对话框 -->
  <el-dialog 
    v-model="twoVisible" 
    title="策略：单道大题批阅" 
    width="850px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    class="question-review-dialog"
  >
    <div class="dialog-header">
      <div class="progress-info">
        <el-progress 
          type="dashboard" 
          :percentage="getQuestionProgressPercentage()" 
          :stroke-width="8"
          :width="80"
          :format="() => `${getQuestionDoneCount()}/${singleQuestionTotal} 道`"
          :color="getProgressColor(getQuestionProgressPercentage())"
        ></el-progress>
        <span class="progress-text">批阅完成率</span>
      </div>
      
      <div class="filter-container">
        <el-select v-model="twoStatus" placeholder="批阅状态" class="filter-item">
          <el-option label="所有状态" value="所有状态" />
          <el-option label="未完成" value="0" />
          <el-option label="已批阅" value="1" />
        </el-select>
        <div class="button-group">
          <el-button @click="twoHandleReset" plain class="action-btn reset-btn">
            <el-icon><RefreshLeft /></el-icon>
            重置
          </el-button>
          <el-button type="primary" @click="twoHandleQuery" class="action-btn query-btn">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
        </div>
      </div>
    </div>

    <div class="dialog-content">
      <page-list :tableData="taskDetailListByTwo" :total="singleQuestionTotal" @getPage="getPageByTwo" >
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="学生姓名" prop="studentName" align="center" min-width="100" />
        <el-table-column label="学号" prop="account" align="center" min-width="120" />
        <el-table-column label="班级名称" prop="classesName" align="center" min-width="140" />
        <el-table-column label="试题名称" align="center" min-width="100" prop="questionName"/>
        <el-table-column label="状态" align="center" min-width="100">
          <template #default="scope">
            <el-tag 
              v-if="scope.row.status === 0" 
              type="danger" 
              effect="dark" 
              class="status-tag"
            >
              未批阅
            </el-tag>
            <el-tag 
              v-if="scope.row.status === 1" 
              type="success" 
              effect="dark" 
              class="status-tag"
            >
              已批阅
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button 
              v-if="scope.row.status === 0" 
              type="primary" 
              size="small" 
              :disabled="isExpired"
              @click="goToSingleQuestionSinglePaperReview(reviewAssignmentId,scope.row.id)"
              plain
              class="table-action-btn edit-btn"
            >
              <el-icon><Edit /></el-icon>
              进入批阅
            </el-button>
            <el-button 
              v-if="scope.row.status === 1" 
              type="success" 
              size="small" 
              @click="goToSingleQuestionSinglePaperReview(reviewAssignmentId,scope.row.id)"
              plain
              class="table-action-btn view-btn"
            >
              <el-icon><View /></el-icon>
              查看批改
            </el-button>
          </template>
        </el-table-column>
      </page-list>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="twoVisible = false" class="footer-btn close-btn">关闭</el-button>
        <el-button 
          type="primary" 
          @click="goToSingleQuestionReview(reviewAssignmentId,reviewAssignmentDetailIds)" 
          :disabled="singleQuestionTotal === 0"
          class="footer-btn start-btn"
        >
          {{ isExpired  ? '批量查看详情' : '开始批量批阅' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
  
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import useTaskManage from '@/hooks/server/useTaskManage'  
import { useServerUserStore } from '@/stores/modules/user-server'
// 导入所需图标
import { RefreshLeft, Search, Edit, View } from '@element-plus/icons-vue'

const userStore = useServerUserStore()

const loadingTable = ref(false)
const { taskList,page, pageSize, total, 
  timeOrder,
  status,
  wholePaperPage,
  wholePaperPageSize,
  wholePaperTotal,
  taskDetailList,
  taskDetailListByTwo,
  doneTotal,
  singleQuestionPage,
  singleQuestionPageSize,
  singleQuestionTotal,
  isExpired,
  reviewAssignmentDetailIds,

  fetchTaskList,
  fetchTaskDetailByTwo,
  handleReset,
  handleQuery,
  fetchTaskDetailByOne,
  goToBatchReview,
  goToSinglePaperReview,
  goToSingleQuestionReview,
  goToSingleQuestionSinglePaperReview
 } = useTaskManage()


onMounted( async () => {
  await fetchTaskList(userStore.userInfo.id,timeOrder.value,status.value)
  loadingTable.value = true
})

// 获取分页数据
const getPage = (pageParams) => {
  page.value = pageParams.page
  pageSize.value = pageParams.pageSize
  fetchTaskList(userStore.userInfo.id,timeOrder.value,status.value)
}

// 查看批阅任务详情
const oneStatus = ref('所有状态')
const oneVisible = ref(false)
const twoStatus = ref('所有状态')
const twoVisible = ref(false)
const reviewAssignmentId = ref(null)

// 判断批阅任务是否过期
const checkTaskExpired = (row) => {
  const currentTime = new Date()
  const taskEndTime = new Date(row.endTime)
  return currentTime > taskEndTime
}

const viewDetail = async (row) => {
   reviewAssignmentId.value = row.id
   isExpired.value = checkTaskExpired(row)
   if(isExpired.value){
    ElMessage.error('任务已过期')
   }
  if(row.assignmentStrategy === 1){
   await fetchTaskDetailByOne(reviewAssignmentId.value,oneStatus.value)
   oneVisible.value = true
  }else{
    await fetchTaskDetailByTwo(reviewAssignmentId.value,twoStatus.value)
    twoVisible.value = true
  }
}




const getPageByOne = (pageParams) => {
  wholePaperPage.value = pageParams.page
  wholePaperPageSize.value = pageParams.pageSize
  fetchTaskDetailByOne(reviewAssignmentId.value,oneStatus.value)
}

const oneHandleReset = () => {
  oneStatus.value = '所有状态'
  fetchTaskDetailByOne(reviewAssignmentId.value,oneStatus.value)
}

const oneHandleQuery = () => {
  fetchTaskDetailByOne(reviewAssignmentId.value,oneStatus.value)
}

const getPageByTwo = (pageParams) => {
  singleQuestionPage.value = pageParams.page
  singleQuestionPageSize.value = pageParams.pageSize
  fetchTaskDetailByTwo(reviewAssignmentId.value,twoStatus.value)
}

const twoHandleReset = () => {
  twoStatus.value = '所有状态'
  fetchTaskDetailByTwo(reviewAssignmentId.value,twoStatus.value)
}

const twoHandleQuery = () => {
  fetchTaskDetailByTwo(reviewAssignmentId.value,twoStatus.value)
}

// 为进度条设置不同的颜色
const progressColor = computed(() => {
  const percentage = Math.floor((doneTotal.value / wholePaperTotal.value) * 100)
  if (percentage < 30) return '#f56c6c'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
})

// 获取进度条状态
const getProgressStatus = (row) => {
  if (row.status === 1) return 'success'
  if (row.doneCount > 0) return 'warning'
  return 'exception'
}

// 获取单道大题批阅进度百分比
const getQuestionProgressPercentage = () => {
  if (!singleQuestionTotal.value || singleQuestionTotal.value === 0) return 0
  return Math.round((getQuestionDoneCount() / singleQuestionTotal.value) * 100)
}

// 获取单道大题已完成数量
const getQuestionDoneCount = () => {
  // 如果没有taskDetailList或为空数组，返回0
  if (!taskDetailListByTwo.value || taskDetailListByTwo.value.length === 0) return 0
  
  // 统计状态为1（已批阅）的题目数量
  return doneTotal.value
}

// 根据百分比获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage < 30) return '#f56c6c'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
}



</script>

<style scoped lang="scss">
.task-manage-card {
  margin: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  
  :deep(.el-card__body) {
    padding: 0;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #f8f9fb;
    border-radius: 8px 8px 0 0;
    
    .left-section {
      h2 {
        margin: 0;
        font-size: 1.4rem;
        color: #303133;
        font-weight: 600;
      }
    }
    
    .right-section {
      display: flex;
      justify-content: flex-end;
      
      .filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        
        .filter-item {
          width: 150px;
          transition: all 0.3s;
          
          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
        }
        
        .filter-button {
          margin-left: 5px;
          border-radius: 4px;
          padding: 8px 16px;
          transition: all 0.3s;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }
  
  // 骨架屏样式
  .skeleton-container {
    width: 100%;
    overflow: hidden;
    
    .skeleton-header {
      background-color: #f8f9fb;
      border-bottom: 1px solid #f0f0f0;
      
      .skeleton-title {
        width: 180px;
        height: 28px;
        background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
        background-size: 400% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 4px;
      }
      
      .skeleton-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        
        .skeleton-select {
          width: 150px;
          height: 32px;
          background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
          background-size: 400% 100%;
          animation: shimmer 1.5s infinite;
          border-radius: 4px;
        }
        
        .skeleton-button {
          width: 80px;
          height: 32px;
          background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
          background-size: 400% 100%;
          animation: shimmer 1.5s infinite;
          border-radius: 4px;
          margin-left: 5px;
        }
      }
    }
    
    .skeleton-table {
      padding: 16px;
      
      .skeleton-table-header {
        display: flex;
        margin-bottom: 16px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        .skeleton-th {
          flex: 1;
          height: 22px;
          background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
          background-size: 400% 100%;
          animation: shimmer 1.5s infinite;
          border-radius: 4px;
          margin: 0 8px;
        }
      }
      
      .skeleton-row {
        display: flex;
        padding: 16px 0;
        border-bottom: 1px solid #f0f0f0;
        
        .skeleton-td {
          flex: 1;
          height: 20px;
          background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
          background-size: 400% 100%;
          animation: shimmer 1.5s infinite;
          border-radius: 4px;
          margin: 0 8px;
          
          .skeleton-button-small {
            width: 90px;
            height: 28px;
            background: linear-gradient(90deg, #f5f5f5 25%, #e9e9e9 50%, #f5f5f5 75%);
            background-size: 400% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 4px;
            margin: 0 auto;
          }
        }
      }
      
      .skeleton-pagination {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 20px;
        padding: 10px 0;
        
        .skeleton-pagination-item {
          width: 32px;
          height: 32px;
          background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
          background-size: 400% 100%;
          animation: shimmer 1.5s infinite;
          border-radius: 4px;
        }
      }
    }
  }
}

// 骨架屏动画
@keyframes shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .task-manage-card {
    margin: 10px;
    
    .card-header, .skeleton-header {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
      
      .left-section {
        text-align: center;
      }
      
      .right-section, .skeleton-filters {
        justify-content: center !important;
        
        .filter-container, .skeleton-filters {
          justify-content: center;
          
          .filter-item, .skeleton-select {
            flex: 1;
            min-width: 120px;
          }
          
          .filter-button, .skeleton-button {
            flex: 1;
          }
        }
      }
    }
    
    .skeleton-table {
      overflow-x: auto;
      
      .skeleton-table-header, .skeleton-row {
        min-width: 700px;
      }
    }
  }
}

/* 新增的样式 */
.paper-review-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      text-align: center;
      display: block;
    }
    
    .el-dialog__headerbtn {
      transition: all 0.3s ease;
      &:hover {
        transform: rotate(90deg);
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  :deep(.el-dialog__footer) {
    border-top: 1px solid #ebeef5;
    padding: 15px 20px;
  }
  
  /* 表格样式 */
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    .el-table__header-wrapper th {
      font-weight: 600;
      color: #303133;
      background-color: #f9fafb;
      text-align: center;
    }
    
    .el-table__row {
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #f0f9ff !important;
      }
      
      td {
        font-size: 14px;
        text-align: center;
      }
    }
  }
  
  /* 分页样式 */
  :deep(.el-pagination) {
    margin-top: 16px;
    padding: 10px 5px;
    justify-content: center;
    
    .btn-prev, .btn-next {
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
    
    .el-pager li {
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.1);
      }
      
      &.is-active {
        font-weight: bold;
        transform: scale(1.1);
      }
    }
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.progress-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
  
  .progress-text {
    margin-top: 8px;
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }
  
  :deep(.el-progress-dashboard) {
    .el-progress__text {
      font-weight: bold;
      font-size: 16px !important;
      animation: pulse 2s infinite;
    }
  }
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 15px;
  
  .filter-item {
    width: 150px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
  
  .button-group {
    display: flex;
    gap: 10px;
  }
  
  .action-btn {
    transition: all 0.3s ease;
    border-radius: 4px;
    width: 90px;
    height: 33px;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(1px);
    }
  }
  
  .reset-btn:hover {
    background-color: #f5f7fa;
    
  }
  
  .query-btn:hover {
    opacity: 0.9;
  }
}

.dialog-content {
  border-radius: 8px;
  overflow: hidden;
}

.review-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  
  span {
    font-size: 13px;
    color: #606266;
    text-align: center;
    font-weight: 500;
  }
  
  :deep(.el-progress-bar) {
    .el-progress-bar__inner {
      transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }
  }
}

.status-tag {
  display: inline-block;
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.05);
  }
}

.table-action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
  
  .el-icon {
    font-size: 14px;
    margin-right: 4px;
    vertical-align: middle;
    transition: all 0.3s ease;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .el-icon {
      transform: scale(1.1);
    }
  }
  
  &:active {
    transform: translateY(1px);
  }
}

.edit-btn:hover {
  color: #409eff;
  border-color: #b3d8ff;
  background-color: #ecf5ff;
}

.view-btn:hover {
  color: #67c23a;
  border-color: #c2e7b0;
  background-color: #f0f9eb;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  
  .footer-btn {
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(1px);
    }
  }
  
  .close-btn:hover {
    background-color: #f5f7fa;
  }
  
  .start-btn:hover {
    opacity: 0.9;
  }
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* 按钮图标样式优化 */
.el-button {
  .el-icon {
    margin-right: 4px;
    vertical-align: middle;
  }
}

/* 单道大题批阅对话框样式 */
.question-review-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      text-align: center;
      display: block;
    }
    
    .el-dialog__headerbtn {
      transition: all 0.3s ease;
      &:hover {
        transform: rotate(90deg);
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  :deep(.el-dialog__footer) {
    border-top: 1px solid #ebeef5;
    padding: 15px 20px;
  }
  
  /* 表格样式 */
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    .el-table__header-wrapper th {
      font-weight: 600;
      color: #303133;
      background-color: #f9fafb;
      text-align: center;
    }
    
    .el-table__row {
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #f0f9ff !important;
      }
      
      td {
        font-size: 14px;
        text-align: center;
      }
    }
  }
  
  /* 分页样式 */
  :deep(.el-pagination) {
    margin-top: 16px;
    padding: 10px 5px;
    justify-content: center;
    
    .btn-prev, .btn-next {
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
    
    .el-pager li {
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.1);
      }
      
      &.is-active {
        font-weight: bold;
        transform: scale(1.1);
      }
    }
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.progress-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
  
  .progress-text {
    margin-top: 8px;
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }
  
  :deep(.el-progress-dashboard) {
    .el-progress__text {
      font-weight: bold;
      font-size: 16px !important;
      animation: pulse 2s infinite;
    }
  }
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 15px;
  
  .filter-item {
    width: 150px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
  
  .button-group {
    display: flex;
    gap: 10px;
  }
  
  .action-btn {
    transition: all 0.3s ease;
    border-radius: 4px;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(1px);
    }
  }
  
  .reset-btn:hover {
    background-color: #f5f7fa;
  }
  
  .query-btn:hover {
    opacity: 0.9;
  }
}

.dialog-content {
  border-radius: 8px;
  overflow: hidden;
}

.status-tag {
  display: inline-block;
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.05);
  }
}

.table-action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
  
  .el-icon {
    font-size: 14px;
    margin-right: 4px;
    vertical-align: middle;
    transition: all 0.3s ease;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .el-icon {
      transform: scale(1.1);
    }
  }
  
  &:active {
    transform: translateY(1px);
  }
}

.edit-btn:hover {
  color: #409eff;
  border-color: #b3d8ff;
  background-color: #ecf5ff;
}

.view-btn:hover {
  color: #67c23a;
  border-color: #c2e7b0;
  background-color: #f0f9eb;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  
  .footer-btn {
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(1px);
    }
  }
  
  .close-btn:hover {
    background-color: #f5f7fa;
  }
  
  .start-btn:hover {
    opacity: 0.9;
  }
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* 确保按钮中的图标正常显示 */
.el-button {
  .el-icon {
    margin-right: 4px;
    vertical-align: middle;
  }
}
</style>